<template>
    <div class="">
        <el-card class="box-card-from">
            <el-form :inline="true" :model="ruleFormQuery" class="demo-form-inline">
                <el-form-item label="分类名称">
                    <el-input v-model="ruleFormQuery.name" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="success" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="name" label="分类名称">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button v-hasPermi="['iot:device:edit']" size="mini" type="text" icon="el-icon-edit"
                                @click="handleUpdate(scope.row)">修改</el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button v-hasPermi="['iot:device:remove']" size="mini" type="text" icon="el-icon-delete"
                                @click="handleDelete(scope.row)">删除</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <el-drawer :title="title" :visible.sync="drawer">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
import { listinfoClass, addinfoClass, UpdateinfoClass, delInfoClass } from "../../../api/information/infoClass.js"
export default {
    name: '',
    props: {},
    data() {
        return {
            title: "新增分类",
            tableData: [],
            formInline: {
                user: '',
                region: ''
            },
            drawer: false,
            ruleForm: {
                name: ''
            },
            ruleFormQuery: {
                name: '',
                pageNum: 1,
                pageSize: 10
            },
            rules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            }
        }
    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            listinfoClass(this.ruleFormQuery).then((res) => {
                this.tableData = res.rows
            });
        },
        addinfo() {
            addinfoClass(this.ruleForm).then((res) => {
                this.$message({
                    message: '新增成功',
                    type: 'success'
                });
                this.drawer = false
                this.getList()
                this.resetForm()
            });
        },
        handleUpdate(val) {
            this.ruleForm = val
            this.drawer = true
            this.title = "修改分类"
        },
        subUpdate () {
            UpdateinfoClass(this.ruleForm).then((res) => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.drawer = false
                this.getList()
                this.resetForm()
            });
        },
        handleDelete(val) {
            delInfoClass(val.id).then((res) => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.getList()
            });
        },
        onSubmit() {
            this.getList()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.title == "修改分类") {
                        this.subUpdate()
                    } else {
                        this.addinfo()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.ruleForm = {
                name: ''
            }
        },
        add () {
            this.drawer = true
            this.title = "新增分类"
        }
    },
}
</script>

<style scoped>
.box-card-from {
    display: flex;
    align-items: flex-end;
}
</style>